<template>
  <view class="card_container">
    <view class="card_title">
      <view class="title_left">
        <slot name="icon">
          <view class="title_icon"></view>
        </slot>

        <slot name="title">
          <view class="title">{{ title }}</view>
        </slot>
      </view>
      <slot name="desc">
        <view class="title_desc">{{ desc }}</view>
      </slot>
    </view>
    <view class="card_content">
      <slot name="default"></slot>
    </view>


    <view class="flex_b_c btn" v-if="showBtn">
      <view class="left flex_c_c" @click="cancel" v-if="btnConfig.showLeft">
        <slot name="cancel_icon">
          <image v-if="btnConfig.showIcon" :src="reject" mode="aspectFit" />
        </slot>
        <slot name="cancel_text">
          <view>{{btnConfig.cancelText}}</view>
        </slot>
      </view>

      <view class="right flex_c_c" @click="ok" v-if="btnConfig.showRight">
        <slot name="ok_icon">
          <image v-if="btnConfig.showIcon" :src="pass" mode="aspectFit" />
        </slot>
        <slot name="ok_text">
          <view class="right_color">{{btnConfig.okText}}</view>
        </slot>
      </view>
    </view>
  </view>
</template>
<script>
import reject from './static/reject.png'
import pass from './static/pass.png'
export default {
  name: "y-card",
  props: {
    title: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },

    /////下面是与按钮相关属性
    showBtn:{
      type: Boolean,
      default: false
    },
    btnConfig:{
      type: Object,
      default(){
        return {
          cancelText:'驳回',
          okText:'通过',
          showLeft: true,
          showRight: true,
          showIcon: true,
        }
      }
    },
  },
  data() {
    return {
      reject,
      pass,
    }
  },
  methods:{
    cancel(){
      this.$emit('cancel')
    },
    ok(){
      this.$emit('ok')
    },
  }
}
</script>


<style scoped lang="scss">
.card_container {
  background-color: $uni-bg-color;
  border-radius: 20rpx;

  .card_title {
    border-bottom: 1rpx solid #e5e5e5;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title_left {
      display: flex;

      .title_icon {
      }

      .title {
        font-size: 30rpx;
      }
    }

    .title_desc {
      font-size: 24rpx;
      color: $uni-text-color-grey;
    }
  }

  .card_content {
    padding: 0 20rpx 20rpx;
  }
}


$border-color: rgba(204, 204, 204, .4);
.btn {
  margin-top: 10rpx;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;

  image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 20rpx;
  }

  .left, .right {
    height: 70rpx;
    line-height: 70rpx;
    width: 100%;
    color: $uni-text-color-black;
    font-size: $uni-font-size-sm;
    text-align: center;
    border-top: 2rpx solid $border-color;

    &:active {
      background-color: rgba(204, 204, 204, .2);
    }
  }

  .left {
    border-right: 2rpx solid $border-color;


  }

  .right {

  }
}

.pb{
  padding-bottom: 30rpx !important;
}

.right_color{
  color: #46D781;
  //font-weight: bold;
}
</style>
